import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:smart_home/model/device.dart';
import 'package:smart_home/model/first_type.dart';
import 'package:smart_home/pages/add_device/store.dart';
import 'package:smart_home/router/index.dart';
import 'package:smart_home/service/first_type_service.dart';
import 'package:smart_home/style.dart';
import 'package:smart_home/utils/color_utils.dart';
import 'package:smart_home/widgets/network_image.dart';
import '../../utils/extension/double.dart';

const APPBARCOLOR = 0x858585;

class AddDevicePage extends StatefulWidget {
  const AddDevicePage({Key? key}) : super(key: key);

  @override
  _AddDevicePageState createState() => _AddDevicePageState();
}

class _AddDevicePageState extends State<AddDevicePage> {
  @override
  Widget build(BuildContext context) {
    final AddDeviceController addDeviceState = Get.put(AddDeviceController());
    addDeviceState.changeDftId(1);
    return Scaffold(
        appBar: _buildAppBar(),
        body: Container(
          child: FutureBuilder<List<FirstType>>(
            future: decodeFirstType(),
            builder: (BuildContext context,
                AsyncSnapshot<List<FirstType>> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text("${snapshot.error}");
                } else {
                  return Row(
                    children: [
                      Expanded(
                          flex: 3,
                          child: Container(
                              child: MenuButtonList(
                            menuList: snapshot,
                          ))),
                      Expanded(
                        flex: 5,
                        child: ListView(
                          children: [
                            Container(
                              margin: EdgeInsets.only(top: 30.px),
                              child: Column(
                                children: [
                                  RightContentBox(),
                                ],
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  );
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ));
  }

  AppBar _buildAppBar() {
    return AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        leadingWidth: 50.px,
        leading: GestureDetector(
            onTap: () {
              Get.back();
            },
            child: Icon(
              Icons.chevron_left_outlined,
              color: ColorsUtil.hexColor(APPBARCOLOR),
            )),
        actions: [
          Container(
            margin: EdgeInsets.only(right:10.px),
            child: Image.asset("static/icons/bluetooth.png"),width: 24.px,)
        ],
        title: Row(
          children: [
            Expanded(
              child: TextButton(
                  style: ButtonStyle(
                      // 去除水波纹效果
                      overlayColor:
                          MaterialStateProperty.all(Colors.transparent),
                      backgroundColor: MaterialStateProperty.all(
                          ColorsUtil.hexColor(0xf8f8f8))),
                  onPressed: () {
                    Get.toNamed(SEARCHDEVICE);
                  },
                  child: Row(
                    children: [
                      Icon(
                        Icons.search,
                        color: ColorsUtil.hexColor(APPBARCOLOR),
                      ),
                      Text(
                        "搜索",
                        style:
                            TextStyle(color: ColorsUtil.hexColor(APPBARCOLOR)),
                      )
                    ],
                  )),
            ),
          ],
        ));
  }
}

class RightContentBox extends StatelessWidget {
  RightContentBox({
    Key? key,
  }) : super(key: key);

  final AddDeviceController addDeviceState = Get.find<AddDeviceController>();

  @override
  Widget build(BuildContext context) {
    return Obx(() => Wrap(
          // alignment: WrapAlignment.center,
          children: addDeviceState.records.length == 0
              ? [
                  Container(
                    child: Text("暂无数据"),
                  )
                ]
              : addDeviceState.records
                  .map((element) => RightContentItem(recordsItem: element))
                  .toList(),
        ));
  }
}

class RightContentItem extends StatelessWidget {
  const RightContentItem({
    Key? key,
    required this.recordsItem,
  }) : super(key: key);

  final Records recordsItem;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100.px,
      margin: EdgeInsets.only(top: 10.px, bottom: 10.px),
      child: GestureDetector(
        onTap: () {
          print("点击");
        },
        child: Column(
          children: [
            NetWorkImage("${recordsItem.dftIcon}",
              width: 24.px, defualtImageUri: "static/icons/damage-map.png"),
            Text(
              "${recordsItem.idstName ?? "设备错误"}",
              textAlign: TextAlign.center,
              softWrap: true,
            )
          ],
        ),
      ),
    );
  }
}

class MenuButtonList extends StatefulWidget {
  final AsyncSnapshot<List<FirstType>> menuList;
  const MenuButtonList({
    Key? key,
    required this.menuList,
  }) : super(key: key);

  @override
  _MenuButtonListState createState() => _MenuButtonListState();
}

class _MenuButtonListState extends State<MenuButtonList> {
  int selectIndex = 0;

  @override
  Widget build(BuildContext context) {
    final AddDeviceController addDeviceState = Get.find<AddDeviceController>();
    return ListView.builder(
        itemExtent: 50,
        itemCount: widget.menuList.data?.length,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              setState(() {
                selectIndex = index;
                addDeviceState.changeDftId(
                    int.tryParse(widget.menuList.data![index].dftId ?? "1"));
              });
            },
            child: Container(
                color: selectIndex == index
                    ? Colors.white
                    : ColorsUtil.hexColor(0xf6f6f6),
                alignment: Alignment.center,
                child: Text("${widget.menuList.data?[index].dstName}",
                    style: TextStyle(
                        color:
                            selectIndex == index ? themeColor : Colors.black))),
          );
        });
  }
}
